<template>
  <div class="patrolTable-root">
    <div class="select-ul">
      <!--<gdAreaSelectVue-->
        <!--ref="gdAreaSelect"-->
        <!--class="select-li"-->
        <!--v-model="areaCodeAll"-->
        <!--@changeGdArea="changeGdArea"-->
      <!--/>-->
      <el-select
        class="select-li"
        v-model="searchForm.specAreaCode"
        @change="changeArea"
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item in areaList"
          :key="item.areaCode"
          :label="item.areaName"
          :value="item.areaCode"
        >
        </el-option>
      </el-select>
      <!--<el-select-->
        <!--class="select-li"-->
        <!--v-model="searchForm.year"-->
        <!--@change="changeYear"-->
        <!--placeholder="请选择"-->
      <!--&gt;-->
        <!--<el-option-->
          <!--v-for="item in yearList"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value"-->
        <!--&gt;-->
        <!--</el-option>-->
      <!--</el-select>-->
      <el-date-picker
        v-model="searchForm.year"
        type="daterange"
        range-separator="¯"
        @change="changeYear"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="areaName" label="城市区域" >
        </el-table-column>
        <el-table-column prop="taskNum" label="巡查计划任务数">
        </el-table-column>
        <el-table-column prop="dealTaskNum" label="巡查计划任务完成数">
        </el-table-column>
        <el-table-column prop="discoverProNum" label="巡检发现问题数">
        </el-table-column>
        <el-table-column prop="dealPorNum" label="巡检发现问题解决数">
        </el-table-column>
        <!--<el-table-column v-for="(item,index) in monthList" :key="index" :label="item">-->
          <!--<el-table-column :prop="'data1_'+item" label="问题发现/解决个数" width="140">-->
          <!--</el-table-column>-->
          <!--<el-table-column :prop="'data2_'+item" label="计划任务/完成个数" width="140">-->
          <!--</el-table-column>-->
        <!--</el-table-column>-->
      </el-table>
    </div>
  </div>
</template>

<script>
import gdAreaSelectVue from "@/components/GdAreaSelect/GdAreaSelect.vue";
import { patrolTableStatistical } from '@/api/risk/patrol'
import { listWithPlaceType } from '@/api/system/area'
export default {
  name: "patrolTable",
  components: {
    gdAreaSelectVue,
  },
  data() {
    return {
      unitList: [
        {
          label: "请选择",
          value: "0",
        },
        {
          label: "巡检单位1",
          value: "1",
        },
        {
          label: "巡检单位2",
          value: "2",
        },
      ],
      yearList: [0, 1, 2].map((item) => {
        return {
          label: new Date().getFullYear() - item,
          value: new Date().getFullYear() - item,
        };
      }),
      areaCodeAll: [],
      searchForm: {
        unit: "0",
        year: [],
        specAreaCode:""
      },
      monthList: [],
      tableData: [],
      areaList:[],
      // 02 市， 03区
      placeType:"02"
    };
  },
  methods: {
    changeGdArea(val) {
      console.log(val);
    },
    changeUnit(val) {
      console.log(val);
    },
    changeYear(val) {
      console.log("year----",val);
      this.searchForm.startTime = ""
      this.searchForm.endTime = ""
      if(null!=val){
        this.searchForm.startTime = val[0]
        this.searchForm.endTime = val[1]
      }
      this.getData()
    },
    changeArea(val){
      console.log(val);
      this.getData()
    },
    getData(){
      let params = {
         ...this.searchForm,
         areaCode: this.$store.state.account.user.deptIds,
         placeType: this.placeType
      }
      patrolTableStatistical(params).then(res=>{
         if(res.code==200){
             this.tableData = res.data.tableData
         }
      })
      // this.monthList = ['2023-9','2023-8','2023-7',]
      // this.tableData = [
      //   {
      //     areaName: "巡检单位1",
      //     taskNum: 99,
      //     dealTaskNum: 66,
      //     discoverProNum: 77,
      //     dealPorNum: 88
      //   },
      //   {
      //     areaName: "巡检单位2",
      //     taskNum: 99,
      //     dealTaskNum: 66,
      //     discoverProNum: 77,
      //     dealPorNum: 88
      //   },
      // ]
    },
    getAreaList(){
      let params = {
        leftAreaCode: this.$store.state.account.user.deptIds,
        // 02 市， 03区
        placeType: this.placeType
      }
      listWithPlaceType(params).then(res=>{
          if(res.code==200){
            this.areaList = res.data
          }
      })
    }
  },
  mounted(){
    this.getAreaList()
    this.getData()
  }
};
</script>

<style lang="scss" scoped>
.patrolTable-root {
  .select-ul {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 0;
    .select-li {
      width: 200px;
      margin-right: 12px;
    }
  }
}
</style>
